<template>
  <view class="add-remark">
    <uni-popup ref="inputDialog" type="dialog">
      <uni-popup-dialog before-close mode="input" title="请输入描述信息" @close="remarkClose" @confirm="addRemark">
        <uni-forms :modelValue="formData" ref="formData" :rules="rules">
          <uni-forms-item label="" name="remark">
            <uni-easyinput type="text" v-model="formData.remark" placeholder="请输入描述信息" />
          </uni-forms-item>
        </uni-forms>
      </uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
  import { addOrderRemark } from '../../api/device/device';
  
  export default {
    name: 'AddRemark',
    components: {},
    props: {
      workId: {
        type: [ String, Number ],
        default: '',
      },
      orderType: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        formData: {
          remark: '',
        },
        rules: {
          remark: {
            rules: [ {
              required: true,
              errorMessage: '请输入描述信息',
            }, {
              validateFunction(rule, value, data, callback) {
                const reg = /^\s*$/g;
                if (reg.test(value)) {
                  callback('请输入描述信息');
                }
                return true;
              },
            },
            ],
          },
        },
      };
    },
    mounted() {
      this.$nextTick(() => {
        this.$refs.inputDialog.open();
      });
    },
    created() {
    },
    methods: {
      async addRemark() {
        let isSuccess = true;
        const formData = this.$refs.formData[ 0 ] || this.$refs.formData;
        const res = await formData.validate().catch(() => {
          isSuccess = false;
        });
        if (isSuccess) {
          const { workId, formData } = this;
          const param = {
            workId,
            remark: formData.remark,
          };
          const res = await addOrderRemark(param, this.orderType);
          if (res.code === 200) {
            this.$emit('add-success');
            this.remarkClose();
          }
        }
      },
      remarkClose() {
        this.$refs.inputDialog.close();
        setTimeout(() => {
          this.$emit('close');
        }, 1000);
      },
    },
  };
</script>

<style lang="scss" scoped>
  .add-remark {
    &, * {
      box-sizing: border-box;
    }
  }
</style>
